---
id: 5dfa22d1b521be39a3de7be0
title: 步驟 12
challengeType: 0
dashedName: step-12
---

# --description--

你可以將任何文本轉化爲一個鏈接，例如 `p` 元素內部的文本。

``` html
<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
```

在 `p` 元素的文本中，在 `cat photos` 周圍添加開始和結束錨標籤（`a`），將這些字樣轉化爲鏈接。 然後將 `href` 屬性設置爲 `https://freecatphotoapp.com`。


# --hints--

你應該在 `p` 元素中嵌套一個新的錨元素（`a`）。

```js
const nestedAnchor = document.querySelector(`p > a`);
assert.isNotNull(nestedAnchor)
```

鏈接的 `href` 值應爲 `https://freecatphotoapp.com`。 你可能忽略了 `href` 值或者有拼寫有誤。

```js
assert(
  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
);
```

鏈接的文本應該是 `cat photos`。 你可能忽略了文本或有拼寫錯誤。

```js
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isTrue(innerContent.trim() === 'cat photos');
```

錨元素中的文本有額外的前導或尾隨空格。 錨文本中唯一的空格應位於 `cat` 和 `photos` 之間。

```js
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
```

在嵌套了錨元素（`a`）之後，瀏覽器中顯示的 `p` 元素應該僅爲 `See more cat photos in our gallery.`。再次檢查 `p` 和嵌套在其中的錨元素的文本、間距或標點。

```js
assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
--fcc-editable-region--
      <p>See more cat photos in our gallery.</p>
--fcc-editable-region--
      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>
```

